<template>
	<view class="container">
		<view class="nav">
			<uni-card class="uni-card__header-extra-text" style="background-color: gray;">
				<uni-row>
					<uni-col :span="2" :offset="1">
						<uni-icons type="auth-filled" size="30"></uni-icons>
					</uni-col>
					<uni-col :span="2">
						<text style="color:white;font-weight: bold;">{{adminInfo.username}}</text>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
		<view class="container-body">
			<view class="content-left">
				<!-- <scroll-view scroll-y="true" > -->
				<view>
					<!-- <uni-collapse accordion v-model="accordionVal" @change="change"> -->
					<uni-collapse accordion>
						<uni-collapse-item title="类目管理">
							<uni-list>
								<uni-list-item :show-extra-icon="true" :extra-icon="iconList[0]" :clickable="true"
									@click="changeCurrentId(0)" title="添加类目">
								</uni-list-item>
								<uni-list-item :show-extra-icon="true" :extra-icon="iconList[1]" :clickable="true"
									@click="changeCurrentId(1)" title="修改类目">
								</uni-list-item>
								<uni-list-item :show-extra-icon="true" :extra-icon="iconList[2]" :clickable="true"
									@click="changeCurrentId(2)" title="删除类目">
								</uni-list-item>
							</uni-list>
						</uni-collapse-item>
						
						<uni-collapse-item title="广告管理">
							<uni-list>
								<uni-list-item :show-extra-icon="true" :extra-icon="iconList[0]"
									@click="changeCurrentId(3)" :clickable="true" title="添加广告">
								</uni-list-item>
								<uni-list-item :show-extra-icon="true" :extra-icon="iconList[1]"
									@click="changeCurrentId(4)" :clickable="true" title="修改广告">
								</uni-list-item>
								<uni-list-item :show-extra-icon="true" :extra-icon="iconList[2]"
									@click="changeCurrentId(5)" :clickable="true" title="删除广告">
								</uni-list-item>
							</uni-list>
						</uni-collapse-item>
						<uni-collapse-item title="用户管理">
							<uni-list>
								<uni-list-item :show-extra-icon="true" :extra-icon="iconList[0]"
									@click="changeCurrentId(6)" :clickable="true" title="添加用户">
								</uni-list-item>
								<uni-list-item :show-extra-icon="true" :extra-icon="iconList[1]"
									@click="changeCurrentId(7)" :clickable="true" title="修改用户">
								</uni-list-item>
								<uni-list-item :show-extra-icon="true" :extra-icon="iconList[2]"
									@click="changeCurrentId(8)" :clickable="true" title="禁用用户">
								</uni-list-item>
							</uni-list>
						</uni-collapse-item>
					</uni-collapse>
				</view>

			</view>
			<view class="edit-class">
				<view v-if="currentIndex === 0">
					<uni-section title="添加类目" type="line">
						<view>
							<view class="uni-container">
								<uni-table ref="table" :loading="loading" border stripe type="selection"
									emptyText="暂无更多数据" @selection-change="selectionChange">
									<uni-tr>
										<uni-th width="50" align="center">id</uni-th>
										<uni-th width="100" align="center">类别名称</uni-th>
										<uni-th width="100" align="center">类别描述</uni-th>
										<uni-th width="100" align="center">类别图标</uni-th>
										<uni-th width="100" align="center">状态</uni-th>
										<uni-th width="100" align="center">更新时间</uni-th>
										<uni-th width="100" align="center">操作</uni-th>
									</uni-tr>
									<uni-tr v-for="(item, index) in tableData" :key="index">
										<uni-td align="center">{{ item.id }}</uni-td>
										<uni-td align="center">{{ item.categoryName }}</uni-td>
										<uni-td align="center">{{ item.categoryDesc }}</uni-td>
										<uni-td align="center">{{ item.categoryImg }}</uni-td>
										<uni-td align="center">{{ item.status }}</uni-td>
										<uni-td align="center">{{ item.updateTime }}</uni-td>
										<uni-td>
											<view class="uni-group">
												<button class="uni-button" size="mini" type="primary">修改</button>
												<button class="uni-button" size="mini" type="warn">删除</button>
											</view>
										</uni-td>
									</uni-tr>
								</uni-table>
								<view class="uni-pagination-box">
									<view class="uni-button">
										<button type="primary" size="mini" @click="showAdCategoryFrom">添加</button>
									</view>
									<uni-pagination show-icon :page-size="pageSize"
										:current="pageCurrent" :total="total" @change="change" />
								</view>
							</view>
						</view>
					</uni-section>
				</view>
				<view v-if="currentIndex === 1">
					<uni-section title="修改类目" type="line"></uni-section>
				</view>
				<view v-if="currentIndex === 2">
					<uni-section title="删除类目" type="line"></uni-section>
				</view>
				<view v-if="currentIndex === 3">
					<uni-section title="添加广告" type="line">
						<view class="uni-button">
							<button type="primary" size="mini" @click="showAdItemFrom">添加</button>
						</view>
					</uni-section>
				</view>
				<view v-if="currentIndex === 4">
					<uni-section title="修改广告" type="line"></uni-section>
				</view>
				<view v-if="currentIndex === 5">
					<uni-section title="删除广告" type="line"></uni-section>
				</view>
				<view v-if="currentIndex === 6">
					<uni-section title="添加用户" type="line"></uni-section>
				</view>
				<view v-if="currentIndex === 7">
					<uni-section title="修改用户" type="line"></uni-section>
				</view>
				<view v-if="currentIndex === 8">
					<uni-section title="删除用户" type="line"></uni-section>
				</view>
			</view>
		</view>
		<!--  表单弹出层开始 -->
		<view class="popup"  v-show="show1">
			<view class="popup-info">
				<view class="popup-info-form"> 
					<uni-forms-item label="类目名称" name="">
						<uni-easyinput type="text" v-model="adCategory.categoryName" placeholder="" />
					</uni-forms-item>
					<uni-forms-item label="类目描述" name="">
						<uni-easyinput type="text" v-model="adCategory.categoryDesc" placeholder="" />
					</uni-forms-item>
					<uni-forms-item name="">
						<button type="button" @click="cancel">取消</button>
						<button type="button" @click="sendAdCategoryInfo">添加</button>
					</uni-forms-item>
				 </view>
			</view>
		</view>
		<view class="popup"  v-show="show2">
			<view class="popup-info">
				<view class="popup-info-form"> 
					<uni-row>
						<uni-col :span="5" :offset="2" style=" height: 76rpx;text-align: right;line-height: 76rpx;">
							<view>类目ID:</view>
						</uni-col>
						<uni-col :span="16">
							<uni-easyinput type="text" v-model="adItem.adId" placeholder="" />
						</uni-col>
					</uni-row>
					
					<uni-row>
						<uni-col :span="5" :offset="2" style="height: 76rpx;text-align: right;line-height: 76rpx;">
							<view>描述:</view>
						</uni-col>
						<uni-col :span="16" >
							<uni-easyinput type="text" v-model="adItem.adDesc" placeholder="" />
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="5" :offset="2" style="height: 76rpx;text-align: right;line-height: 76rpx;">
							<view>图片:</view>
						</uni-col>
						<uni-col :span="16" >
							<!-- <uni-easyinput type="text" v-model="adItem.adImgUrl" placeholder="" /> -->
							<button @click="chooseImage" size="mini">点击上传</button>
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="5" :offset="2" style="height: 76rpx;text-align: right;line-height: 76rpx;">
							<view>链接地址:</view>
						</uni-col>
						<uni-col :span="16" >
							<uni-easyinput type="text" v-model="adItem.adLinkUrl" placeholder="" />
						</uni-col>
					</uni-row>
					<uni-row>
						<uni-col :span="8" :offset="4" >
							<button type="primary" size="mini" @click="cancel2">取消</button>
						</uni-col>
						<uni-col :span="8" :offset="4">
							<button type="primary"  size="mini"  @click="sendAdItemInfo">添加</button>
						</uni-col>
					</uni-row>
				 </view>
			</view>
		</view>
		<!--  表单弹出层结束 -->
	</view>
</template>

<script>
	import api from "../../api/api.js"
	export default {
		data() {
			return {
				adminInfo: {
					username: '',
					phone: ''
				},

				iconList: [{
						color: '#4cd964',
						size: '26',
						type: 'plusempty'
					},
					{
						color: '#0055ff',
						size: '26',
						type: 'compose'
					},
					{
						color: '#ff0000',
						size: '26',
						type: 'trash-filled'
					},
				],
				currentIndex: 0,
				tableData: [],
				// 每页数据量
				pageSize: 10,
				// 当前页I
				pageCurrent: 1,
				// 数据总量
				total: 0,
				loading: false,
				
				show1: false,
				show2: false,
				adCategory:{
					categoryName:'',
					categoryDesc:''
				},
				adItem:{
					adId:1,
					adDesc:'',
					adImgUrl:'',
					adLinkUrl:''
				}
			}
		},
		onLoad() {
			var that = this;
			uni.getStorage({
				key: api.base.userInfo,
				complete(res) {
					if (res.data) {
						that.adminInfo.username = res.data.username;
						that.phone = res.data.phone;
					} else {
						console.log("获取数据异常", res);
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				}
			});
			this.getData(1);

		},
		methods: {
			cancel(){
				this.show1 = false;
			},
			sendAdCategoryInfo(){
				this.show1 = false;
				// console.log("点击了",this.adCategory);
			},
			showAdCategoryFrom(){
				this.show1 = true;
				
			},
			cancel2(){
				this.show2 = false;
			},
			// 添加广告
			sendAdItemInfo(){
				
				// console.log("点击了",this.adItem);
				
				api.addAdItem(this.adItem).then(res =>{
					uni.showToast({
						title:res.msg,
						icon:'none'
					});
					if(res.code === 200){
						this.show2 = false;
					}
				})
			},
			showAdItemFrom(){
				this.show2 = true;
			},
			
			// change(e) {
			// 	console.log("状态切换了", e);
			// },
			changeCurrentId(i) {
				this.currentIndex = i;
				console.log("内容改了", this.currentIndex);
			},
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},
			// 多选
			selectionChange(e) {
				console.log(e.detail.index)
				this.selectedIndexs = e.detail.index
			},
			//批量删除
			delTable() {
				console.log(this.selectedItems())
			},
			// 分页触发
			change(e) {
				this.$refs.table.clearSelection()
				this.selectedIndexs.length = 0
				this.getData(e.current);
			},
			// 搜索
			// search() {
			// 	this.getData(1, this.searchVal)
			// },
			// 获取数据
			getData(pageCurrent) {
				this.loading = true
				this.pageCurrent = pageCurrent
				if(this.currentIndex <= 2){
					api.adFindByPage({page:this.pageCurrent,size:this.pageSize}).then(res =>{
						if(res.code === 200){
							console.log(res)
							this.tableData = res.data.records;
							this.total = res.data.total;
							this.loading = false;
						}
					})
				}else if(this.currentIndex <= 5){
					
				}else{
					
				}
				
			},
			
			chooseImage(){
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: api.base.baseUrl + api.base.uploadFile, 
							filePath: tempFilePaths[0],
							name: 'file',
							// formData: {
							// 	'user': 'test'
							// },
							success: (uploadFileRes) => {
								// console.log(uploadFileRes.data);
								this.adItem.adImgUrl = JSON.parse(uploadFileRes.data).data;
								// console.log(this.adItem.adImgUrl);
							}
						});
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20px;

		/* font-size: 14px;
		line-height: 24px; */
		.container-body {
			display: flex;
			flex-direction: row;
			padding: 20rpx;

			.content-left {
				width: 400rpx;
				height: 1400rpx;
				background-color: aliceblue;
				// border-right: blue;
				// border-style: solid;
			}

			.edit-class {
				// border: 1rpx deeppink solid;
				margin-left: 10rpx;
				width: 90%;
				.uni-group{
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
				}
				.uni-pagination-box{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 20rpx;
					.uni-button{
						margin-bottom: 20rpx;
					}
				}
			}
		}
		
		.popup{
			position: fixed;
			left:0;
			right: 0;
			top:0;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 9998;
			.popup-info{
				position: fixed;
				width:700upx;
				top:50%;
				left:50%;
				transform: translate(-50%, -50%);
				font-size: 28upx;
				padding: 20upx;
				border-radius: 20upx;
				background-color: #fff;
				z-index: 9999;	
				.popup-info-form{
					.uni-row{
						margin-top: 20rpx;
					}
				}
			}
		}
	}
</style>